<template>
	<view>
		<view class="u-p-b-20"></view>
		<u-cell-group>
			<u-cell-item :title="order.order_no || ''" :arrow="false">
				<u-tag mode="dark" shape="circle" v-if="order.status == 0" text="已取消" type="info"></u-tag>
				<u-tag mode="dark" shape="circle" v-else-if="order.status == 1" text="待支付" type="warning"></u-tag>
				<u-tag mode="dark" shape="circle" v-else-if="order.status == 2" text="待支付" type="warning"></u-tag>
				<u-tag mode="dark" shape="circle" v-else-if="order.status == 3" text="待审核" type="primary"></u-tag>
				<u-tag mode="dark" shape="circle" v-else-if="order.status == 4" text="待发货" type="primary"></u-tag>
				<u-tag mode="dark" shape="circle" v-else-if="order.status == 5" text="已发货" type="success"></u-tag>
				<u-tag mode="dark" shape="circle" v-else-if="order.status == 6" text="已完成" type="primary"></u-tag>
			</u-cell-item>
		</u-cell-group>

		<view v-if="addr">
			<view class="u-p-b-20"></view>
			<u-cell-group>
				<u-cell-item :center="true" :arrow="false">
					<view class="u-flex u-row-between u-content-color u-font-lg">
						<text>{{ address.name }}</text>
						<text>{{ address.phone }}</text>
					</view>
					<u-line></u-line>
					<view class="u-m-t-15 u-text-left u-content-color u-font-sm">
						<text>{{ address.province }}</text>
						<text>{{ address.city }}</text>
						<text>{{ address.area }}</text>
						<text>{{ address.address }}</text>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-p-b-20"></view>
		<view class="u-p-30 m-bg-main order-goods">
			<view class="item" v-for="(item, index) in order.items" :key="index" @click="$u.goto.goodsShow(item.goods_code)">
				<view class="left"><image :src="item.goods_cover" mode="aspectFill"></image></view>
				<view class="content">
					<view class="title u-line-1">{{ item.goods_name }}</view>
					<view class="type u-line-1">{{ item.goods_spec }}</view>
				</view>
				<view class="right u-flex-1">
					<view class="price">
						<text class="u-font-xs">￥</text>
						<text class="u-font-lg m-font-bold">{{ item.price_selling.split('.')[0] || 0 }}.</text>
						<text class="u-font-xs">{{ item.price_selling.split('.')[1] || '00' }}</text>
					</view>
					<view class="number">x {{ item.stock_sales }}</view>
				</view>
			</view>
		</view>

		<view class="u-p-b-20"></view>
		<u-cell-group>
			<u-cell-item title="配送方式" icon="car" value="快递配送" :arrow="false"></u-cell-item>
			<u-cell-item title="商品金额" icon="shopping-cart" :arrow="false">
				<text class="u-font-xs">￥</text>
				<text>{{ order.amount_goods }}</text>
			</u-cell-item>
			<u-cell-item title="配送费用" icon="rmb-circle" :arrow="false">
				<text v-if="order.amount_express > 0">￥{{ order.amount_express }}</text>
				<text v-else>免运费</text>
			</u-cell-item>
			<u-cell-item title="随机立减" icon="gift" :arrow="false" v-if="order.amount_reduct > 0">
				<text class="u-font-xs">￥</text>
				<text class="u-font-xs u-type-primary">{{ order.amount_reduct.split('.')[0] || 0 }}.</text>
				<text class="u-font-xs u-type-primary">{{ order.amount_reduct.split('.')[1] || '00' }}</text>
			</u-cell-item>
			<u-cell-item title="支付金额" icon="fingerprint" :arrow="false">
				<view v-if="order.amount_real > 0">
					<text class="u-font-xs">￥</text>
					<text class="u-font-lg m-font-bold u-type-error">{{ order.amount_real.split('.')[0] || 0 }}.</text>
					<text class="u-font-xs u-type-error">{{ order.amount_real.split('.')[1] || '00' }}</text>
				</view>
				<view v-else><text>无需支付</text></view>
			</u-cell-item>
		</u-cell-group>

		<view class="u-p-b-20"></view>
		<u-cell-group>
			<u-cell-item title="下单时间" icon="calendar" :value="order.create_at || '-'" :arrow="false"></u-cell-item>
			<u-cell-item v-if="order.cancel_status" title="取消时间" icon="calendar" :value="order.cancel_datetime || '-'" :arrow="false"></u-cell-item>
			<u-cell-item v-if="order.cancel_status" title="取消描述" icon="calendar" :value="order.cancel_remark || '-'" :arrow="false"></u-cell-item>

			<u-cell-item v-if="order.payment_status" title="支付方式" icon="calendar" :value="order.payment_type || '-'" :arrow="false"></u-cell-item>
			<u-cell-item v-if="order.payment_status" title="支付单号" icon="calendar" :value="order.payment_trade || '-'" :arrow="false"></u-cell-item>
			<u-cell-item v-if="order.payment_status" title="支付时间" icon="calendar" :value="order.create_at || '-'" :arrow="false"></u-cell-item>
		</u-cell-group>

		<view class="u-p-40 u-m-t-40"></view>
		<view class="m-layout-bottom">
			<view class="logistics btn" v-if="order.status > 3">查看物流</view>
			<view class="evaluate btn" v-if="order.status < 1" @click="doRemove(order.order_no)">删 除</view>
			<view class="logistics btn" v-if="order.status < 3 && order.status > 0" @click="doCancel(order.order_no)">取 消</view>
			<view class="evaluate btn" v-if="order.status < 3 && order.status > 0" @click="openOrderPay(order.order_no)">支 付</view>
		</view>
		<m-login ref="login"></m-login>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addr: '',
			code: '',
			order: { items: [{ price_selling: '0.00' }], amount_reduct: '0.00' },
			address: {}
		};
	},
	onLoad(opt) {
		this.addr = opt.addr || '';
		this.code = opt.order || '';
	},
	mounted() {
		this.load();
	},
	methods: {
		// 加载订单数据
		load() {
			this.$refs.login.local().then(() => {
				if (this.addr) this.loadAddr();
				if (this.code) {
					this.loadOrder();
				} else {
					this.$u.message.alert('订单不存在').then(() => {
						this.$u.route({ url: 'pages/order/index' });
					});
				}
			});
		},
		// 跳转到支付页面
		openOrderPay(order) {
			this.$u.route('pages/order/xpay', { order: order });
		},
		// 加载商品数据
		loadOrder() {
			this.$u.post('data/api.auth.order/get', { order_no: this.code }).then(ret => {
				console.log('loadOrder', ret);
				if (ret.code < 1 || ret.data.list.length < 1) {
					this.$u.message.alert('订单不存在').then(() => {
						this.$u.route({ url: 'pages/order/index' });
					});
				} else {
					this.order = ret.data.list[0] || {};
					this.addr = this.order.truck['address_code'] || '';
					if (this.addr) this.loadAddr();
				}
			});
		},
		// 加载收货地址
		loadAddr() {
			this.$u.post('data/api.auth.address/get', { code: this.addr }).then(ret => {
				this.address = ret.data.list[0];
			});
		},
		// 移除用户订单
		doRemove(order) {
			this.$u.message.confirm('确定要删除订单吗？').then(state => {
				if (state) {
					this.$u.api.post('data/api.auth.order/remove', { order_no: order }).then(ret => {
						this.$u.route({ type: 'redirect', url: 'pages/order/index' });
					});
				}
			});
		},
		// 取消用户订单
		doCancel(order) {
			this.$u.message.confirm('确定要取消订单吗？').then(state => {
				if (state) {
					this.$u.api.post('data/api.auth.order/cancel', { order_no: order }).then(ret => {
						this.load();
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.m-layout-bottom {
	width: 100%;
	bottom: 40rpx;
	position: fixed;
	text-align: center;

	.btn {
		width: 120rpx;
		color: $u-type-info-dark;
		border: 2rpx solid $u-border-color;
		background: $u-bg-main;
		display: inline-block;
		font-size: 26rpx;
		text-align: center;
		line-height: 52rpx;
		margin: 0 15rpx;
		border-radius: 26rpx;
	}

	.evaluate {
		color: $u-type-warning-dark;
		border-color: $u-type-warning-dark;
	}
}
</style>
